<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta cha   rset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>K的工具箱</title>
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
</head>

<body>
    <div class="container py-5">
        <h1 class="text-primary text-center mb-5">K的工具箱</h1>
        <div class="row row-cols-md-3 g-4">
            <div class="col">
                <div class="card h-100">
                    <div class="card-body">
                        <h2 class="card-title text-center">文本工具</h2>
                        <ul class="list-unstyled">
                            <li><a href="./tool/CharacterCount/index.html" class="btn btn-outline-primary w-100"  target="_blank">字符计数器</a></li>
                            <li><a href="./tool/TextComparison/index.html" class="btn btn-outline-primary w-100 mt-3"  target="_blank">文本比较器</a></li>
                            <li><a href="./tool/Tablet/index.html" class="btn btn-outline-primary w-100 mt-3"  target="_blank">写字板</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <div class="card-body">
                        <h2 class="card-title text-center">图片工具</h2>
                        <ul class="list-unstyled">
                            <li><a href="./tool/ImgBase64/index.html" class="btn btn-outline-success w-100" target="_blank">图片转Base64</a></li>
                            <li><a href="./tool/ImgExif/index.html" class="btn btn-outline-success w-100 mt-3" target="_blank">图片Exif信息查看</a></li>
                            <li><a href="./tool/ImgCompress/index.html" class="btn btn-outline-success w-100 mt-3" target="_blank">图片压缩器</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <div class="card-body">
                        <h2 class="card-title text-center">转换工具</h2>
                        <ul class="list-unstyled">
                            <li><a href="./tool/DecimalConversion/index.html" class="btn btn-outline-danger w-100">进制转换</a></li>
                            <li><a href="./tool/ColorConversion/index.html" class="btn btn-outline-danger w-100 mt-3">色值转换</a></li>
                            <li><a href="./tool/UnixTime/index.html" class="btn btn-outline-danger w-100 mt-3">Unix时间戳转换</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入 Bootstrap 的 JS 文件和依赖文件 -->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.10.2/umd/popper.min.js"></script> -->
    <script src="bootstrap/bootstrap.min.js"></script>
</body>
<style>
    /* 为每个按钮添加一个内边距和宽度，使其均匀分布且具有相同的宽度 */
    .btn {
        padding: 10px;
        width: 100%;
    }

    /* 鼠标悬停时，将按钮文本颜色和背景颜色反转 */
    .btn:hover {
        background-color: #007bff;
        color: #fff;
    }

    /* 将卡片标题居中对齐 */
    .card-title {
        text-align: center;
    }
</style>

</html>